<template>
  <div :class="[theme === 'dark' ? tableDivDark : tableDiv]" :style="{height: height}">
    <h1 v-if="title" :class="[theme === 'dark' ? titleStyleDark : titleStyle]">{{title}}</h1>
    <a-table
        :columns="columns"
        :data-source="table_data"
        rowKey='id'
        :pagination="false"
        :class="[theme === 'dark' ? tableDark : table]"
        :style="{'--rowHeight': row_height}"
    >
    </a-table>
  </div>
</template>
<script>
export default {
    props: {
        theme: String,// 主题 'dark' 暗色系
        columns: Array, // 表头列名
        table_data: Array, // 数据
        height: { // 高度
            type: String,
            default: '40vh'
        },
        title: String, // 标题
        row_height: { // 行高
            type: String,
            default: '3px'
        }
    },
    data () {
        return {
            titleStyle: 'eCharts-table-title',
            titleStyleDark: 'eCharts-table-title-dark',
            table: 'eCharts-table',
            tableDark: 'eCharts-table-dark',
            tableDiv: 'eCharts-table-div',
            tableDivDark: 'eCharts-table-div-dark'
        }
    }
}
</script>
<style>
.eCharts-table-title{
    font: bolder 18px 'Microsoft YaHei';
    text-align: center;
    margin-bottom: 30px;
}
.eCharts-table-title-dark{
    font: bolder 18px 'Microsoft YaHei';
    text-align: center;
    margin-bottom: 30px;
    color: white
}
.eCharts-table{
    width: 90%;
    margin: 0 auto;
    --rowHeight: 3px;
}
.eCharts-table-dark{
    width: 90%;
    margin: 0 auto;
    --rowHeight: 3px;
}
.eCharts-table .ant-table-thead > tr > th {
    padding: 8px 16px;
}
.eCharts-table-dark .ant-table-thead > tr > th {
    padding: 8px 16px;
    background-color: #e69d87;
    color: white;
}
.eCharts-table .ant-table-tbody > tr > td {
    padding: var(--rowHeight) 16px;
    font: 12px 'Microsoft YaHei';
}
.eCharts-table-dark .ant-table-tbody > tr > td {
    padding: var(--rowHeight) 16px;
    font: 12px 'Microsoft YaHei';
    background-color: #759aa0;
    color: white;
}
.eCharts-table-dark .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
     background: #dd6b66; 
}
.eCharts-table-div{
    width: 100%;
}
.eCharts-table-div-dark{
    width: 100%;
    background-color: rgb(51, 51, 51);
}
</style>
